import React,{useState,useEffect} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    FlatList,
    Text,
    Image,
    TouchableOpacity
} from 'react-native';
import '../../features/Phone';

const listHeader = (headerdata) => {
    return (
        // 简介
        <View style={{
            width: w*0.9
        }}>
            <Image 
                source={{uri:headerdata.image}}
                style={{width:w*0.9, height:h*0.11, marginBottom:10}}
            />
            <Text style={{fontSize:13, color:'blue'}}>{headerdata.content}</Text>
        </View>
    )
}

const renderItem = (item, navigation) => {
    return (
        <TouchableOpacity
            activeOpacity={0.8}
            onPress={()=>{navigation.navigate('Perfume',{item: item})}}
        >
            <View
                key={item.nose_id}
                style={{
                    width: w*0.9,
                    marginTop: 30,
                    flexDirection: 'row'
                }}
            >
                <View
                    style={{
                        width: p2d(210), 
                        height: p2d(210),
                        backgroundColor: 'white',
                        borderWidth: 1,
                        borderColor: 'lightgray',
                        justifyContent: 'center',
                        alignItems: 'center',
                        marginRight: 20,
                    }}
                >
                    <Image 
                        source={{uri:item.nose_logo}}
                        style={{width:p2d(60), height:p2d(120)}}
                    />
                </View>
                <View style={{width: w*0.9-p2d(210)-20}}>
                    <Text style={{fontSize:15}}>{item.nose_name}</Text>
                    <Text style={{
                        fontSize:12,
                        marginTop: 5,
                        marginBottom: 5
                    }}>
                        {item.nose_score}分 {item.nose_num}人评价
                    </Text>
                    <Text style={{fontSize:12}}>前调：{item.nose_topTone}</Text>
                    <Text style={{fontSize:12}}>中调：{item.nose_middleTone}</Text>
                    <Text style={{fontSize:12}}>后调：{item.nose_afterTone}</Text>
                </View>
            </View>
        </TouchableOpacity>
    )
};

const Type = ({navigation}) => {
    const [data,setData] = useState([]);
    const [headerdata,setHeaderdata] = useState({});
    const getData = (num) => {
        fetch('http://175.27.190.73:9000/flavor/'+num)
            .then(res=>res.json())
            .then(res=>{
                setHeaderdata(res.flavor[0]);
            })
            .catch(err=>{
                setHeaderdata({});
            })

        fetch('http://175.27.190.73:9000/noseHouse/'+num)
            .then(res=>res.json())
            .then(res=>{
                setData(res.Nose);
            })
            .catch(err=>{
                setData([]);
            })
    }
    useEffect(()=>{
        navigation.addListener('tabPress', e=>{
            const typed = e.target.substring(0,e.target.indexOf('-'));
            if(typed == '柑橘调') {
                getData(1);
            } else if(typed == '绿叶调') {
                getData(2);
            } else if(typed == '水生调') {
                getData(3);
            } else if(typed == '馥奇香调') {
                getData(4);
            } else if(typed == '皮革调') {
                getData(5);
            } else if(typed == '西普调') {
                getData(6);
            } else if(typed=='木质调' || typed == '东方调' || typed == '美食调' || typed == '花香调' || typed == '果香调') {
                getData(0);
            };
        });
    },[]);

    return (
        <View style={{
            height: h*0.84-40,
            padding: 16,
            backgroundColor: '#f0f0f0',
            alignItems: 'center'
        }}>
            {/* 商品列表 */}
            <FlatList 
                data={data}
                nestedScrollEnabled={true}
                showsVerticalScrollIndicator={false}
                keyExtractor={(item) => item.nose_id}
                ListHeaderComponent={()=>{
                    if(headerdata == '{}') {
                        return <Text style={{color:'black', fontSize:12}}>该分类暂无数据</Text>
                    } else {
                        return listHeader(headerdata)
                    }
                }}
                renderItem={({item})=>{
                    return renderItem(item,navigation);
                }}
            />
        </View>
    )
}

export default Type
